<template>
    <div class="app-container">
      <div class="content">
        <div class="lgm-search">
          <el-form
            ref="form"
            :model="searchParams"
            label-width="100px"
            class="search-form"
          >
            <el-form-item label="名称">
              <el-input
                v-model="searchParams.title"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            
            <el-form-item label="提现状态">
              <el-select v-model="searchParams.package_id">
                <el-option v-for="(item,idx) in packageselectList"
                :key="idx"
                :value="item.id"
                :label="item.name" />
               
              </el-select>
            </el-form-item>
  
            <el-row>
              <el-button
                type="success"
                class="lgm-search-btn"
                icon="el-icon-search"
                @click="seach"
                >搜索</el-button
              >
              <el-button
                class="lgm-reset-btn"
                icon="el-icon-refresh"
                @click="reset"
                >重置</el-button
              >
            </el-row>
          </el-form>
        </div>
  
        <div class="table">
          <el-table :data="dataList" border>
            <el-table-column
              prop="nickname"
              label="企业名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="legal_person"
              label="老板姓名"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="store_mobile"
              label="联系方式
  "
              align="center"
            ></el-table-column>
            <el-table-column
              prop="store_address"
              label="地址"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="package_name"
              label="类型"
              align="center"
            ></el-table-column>
            <!-- <el-table-column prop="type" label="类型" align="center">
              <template slot-scope="scope">
                <div>
                  <p v-if="scope.row.type == 1">支付宝</p>
                  <p v-if="scope.row.type == 2">微信</p>
                  <p v-if="scope.row.type == 3">银行卡</p>
                </div>
              </template>
            </el-table-column> -->
  
            <el-table-column
              prop="nickname"
              label="关联推广员"
              align="center"
            ></el-table-column>
  
            <el-table-column
              prop="expiration_at"
              label="使用期限"
              align="center"
            ></el-table-column>
            >
            <!-- <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="280"
             <template slot-scope="scope">
                <div class="flex">
                  <el-button
                    size="mini"
                    type="primary"
                    plain
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                    <i class="el-icon-edit"></i> 修改
                  </el-button>
                  <el-button
                    size="mini"
                    plain
                    v-if="scope.row.status == 0 || scope.row.status == 1"
                    @click="handleEdit2(scope.$index, scope.row)"
                  >
                    审批申请
                  </el-button>
                  <el-button size="mini" type="danger" plain
                                      @click="handleDelete(scope.$index, scope.row)">
                                      <i class="el-icon-delete"></i> 删除
                                  </el-button>
                </div>
              </template> 
            </el-table-column>-->
          </el-table>
        </div>
        <div class="lgm-page-wrap">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :page-sizes="[10, 100, 200, 300, 400]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 修改 -->
      <el-dialog title="提现" :visible.sync="dialogVisible" center width="500px">
        <el-form
          :model="detailForm"
          ref="ruleForm"
          label-width="100px"
          class="detailForm"
        >
          <el-form-item label="提现类型" style="width: 100%">
            <el-radio
              v-model="detailForm.type"
              label="1"
              :disabled="detailForm.id ? true : false"
              >支付宝</el-radio
            >
            <el-radio
              v-model="detailForm.type"
              label="2"
              :disabled="detailForm.id ? true : false"
              >微信</el-radio
            >
            <el-radio
              v-model="detailForm.type"
              label="3"
              :disabled="detailForm.id ? true : false"
              >银行卡</el-radio
            >
          </el-form-item>
          <el-form-item label="申请金额" prop="money" style="width: 100%">
            <el-input
              v-model="detailForm.money"
              :disabled="detailForm.id ? true : false"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks" style="width: 100%">
            <el-input v-model="detailForm.remarks"></el-input>
          </el-form-item>
        </el-form>
  
        <span slot="footer" class="dialog-footer">
          <el-button class="lgm-reset-btn" @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="dialogConfirm('ruleForm')"
            class="lgm-search-btn"
            >确定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog title="审核" :visible.sync="dialogVisible2" center width="500px">
        <el-form
          :model="detailForm"
          ref="ruleForm"
          label-width="100px"
          class="detailForm"
        >
          <el-form-item label="提现类型" style="width: 100%">
            <el-radio
              v-if="detailForm.status == 0"
              v-model="detailForm.type"
              label="1"
              >审核通过</el-radio
            >
            <el-radio
              v-if="detailForm.status == 0"
              v-model="detailForm.type"
              label="2"
              >审核失败</el-radio
            >
            <el-radio
              v-if="detailForm.status == 1"
              v-model="detailForm.type"
              label="3"
              >转账成功</el-radio
            >
          </el-form-item>
  
          <el-form-item label="审批备注" prop="remarks" style="width: 100%">
            <el-input v-model="detailForm.remarks"></el-input>
          </el-form-item>
        </el-form>
  
        <span slot="footer" class="dialog-footer">
          <el-button class="lgm-reset-btn" @click="dialogVisible2 = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="dialogConfirm2('ruleForm')"
            class="lgm-search-btn"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {
    staticdelivery,
    clothing_categoryAdmin,
    styleAdmin,
    colorAdmin,
    sizeAdmin,
    my_list,
    set_status,
    packageselect
  } from "@/api/admin";
  
  export default {
    name: "StyleManage",
    data() {
      return {
        page: 1,
        page_size: 10,
        total: 0,
        detail: {},
        clothing_categoryAdminList: [],
        styleAdminList: [],
        sizeList: [],
        colorList: [],
  
        searchParams: {
          package_id: "",
          title: "",
        },
        detailForm: {
          type: "1",
          money: "",
          remarks: "",
        },
        rules: {},
        srcList: [
          "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        ],
        dataList: [],
        dialogVisible: false,
        dialogVisible2: false,
        packageselectList:[]
      };
    },
    mounted() {
      this.my_listFn();
      
      packageselect(
          { },
          "GET"
        ).then((e) => {
          this.packageselectList = [{name:'普通用户',id:0},...e.data.list];
        });
    },
    methods: {
      handleSizeChange(value) {
        this.page_size = value;
        this.my_listFn();
      },
      handleCurrentChange(value) {
        this.page = value;
        this.my_listFn();
      },
      my_listFn() {
        my_list(
          {
            page: this.page,
            page_size: this.page_size,
            ...this.searchParams,
          },
          "GET"
        ).then((e) => {
          console.log(e.data.list);
          this.dataList = e.data.list;
          this.total = e.data.total;
        });
       
      },
      dialogConfirm() {
        console.log(this.detailForm);
        my_list(
          this.detailForm,
          this.detailForm.id ? "PATCH" : "POST",
          this.detailForm.id
        ).then((e) => {
          this.dialogVisible = false;
          this.seach();
        });
      },
  
      seach() {
        this.page = 1;
        this.my_listFn();
      },
      reset() {
        for (let i in this.searchParams) {
          this.searchParams[i] = null;
        }
        this.seach();
      },
  
      addList() {
        this.detailForm = {
          type: "1",
          money: "",
          remarks: "",
        };
        this.dialogVisible = true;
      },
      handleEdit(idx, item) {
        my_list(
          {
            id: item.id,
          },
          "GET",
          item.id
        ).then((e) => {
          this.detailForm = JSON.parse(JSON.stringify(item));
  
          this.dialogVisible = true;
        });
      },
      handleEdit2(idx, item) {
        my_list(
          {
            id: item.id,
          },
          "GET",
          item.id
        ).then((e) => {
          this.detailForm = JSON.parse(JSON.stringify(item));
          if (item.status == 1) {
            this.detailForm.type = "3";
          } else {
            this.detailForm.type = "1";
          }
  
          this.dialogVisible2 = true;
        });
      },
      dialogConfirm2() {
        console.log(this.detailForm);
        set_status(this.detailForm, "POST").then((e) => {
          this.dialogVisible = false;
          this.seach();
        });
      },
  
      handleDelete(index, item) {
        this.$confirm("是否确认删除选中的?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          confirmButtonClass: "submitDeleteBtn",
          type: "warning",
        }).then(() => {
          my_list({}, "DELETE", item.id).then((e) => {
            this.seach();
          });
  
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      },
      colorAdminFn() {
        colorAdmin(
          {
            page: 1,
            page_size: 1000,
          },
          "GET"
        ).then((e) => {
          this.colorList = e.data.list;
        });
      },
      sizeAdminFn() {
        sizeAdmin(
          {
            page: 1,
            page_size: 1000,
          },
          "GET"
        ).then((e) => {
          this.sizeList = e.data.list;
        });
      },
      clothing_categoryAdminFn() {
        clothing_categoryAdmin(
          {
            page: 1,
            page_size: 1000,
          },
          "GET"
        ).then((e) => {
          this.clothing_categoryAdminList = e.data.list;
        });
      },
      styleAdminFn() {
        styleAdmin(
          {
            page: 1,
            page_size: 1000,
          },
          "GET"
        ).then((e) => {
          this.styleAdminList = e.data.list;
        });
      },
  
      clickItem() {
        console.log(456);
      },
      formatDate(date) {
        const d = new Date(date);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
        const day = String(d.getDate()).padStart(2, "0");
        return `${year}-${month}-${day}`;
      },
      staticdeliveryFn() {
        let obj = this.searchParams;
        if (this.searchParams.time1) {
          obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
          obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import "~@/styles/variables.scss";
  
  .app-container {
    .content {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
    }
  
    .lgm-search {
      ::v-deep input {
        width: 210px;
      }
    }
  
    .info {
      display: flex;
      margin-bottom: 20px;
  
      .item {
        width: 220px;
        padding: 8px 15px;
        border: 1px solid #eee;
        border-radius: 6px;
        margin-right: 30px;
  
        .title {
          margin-bottom: 6px;
        }
  
        .box {
          width: 100%;
          height: 100px;
          border-radius: 6px;
          background-color: #fdf0e5;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $fontColor;
          font-weight: bold;
          font-size: 18px;
        }
      }
    }
  }
  </style>
  